{% extends "base_item.html" %}
{% load static %}
{% block content %}
    <!-- =======================以上为公共头部 ======================  -->


    <link href="{% static 'images/css/inner.css' %}" rel="stylesheet" type="text/css">
    <div class="obanner">
        <!-- pc端banner -->
        <img src="{% static 'images/20140926103656412.jpg' %}" class="hidden_xs" width="100%" alt=""/>
        <!-- phone 端banners -->
        <img src="{% static 'images/20140926103656412.jpg' %}" class="hidden_lg" width="100%" alt=""/>
    </div>
    <div class="bread">
        <div class="bread_text wrap">
            <span><a href="{% url 'index' %}">TOP</a>
                <span>&gt;</span> <a class="red">search</a>

        </div>
    </div>
    <!--inner start -->
    <div class="inner wrap clearfix">
        <aside class="right">
            <div class="navbox">
{#                <div class="nav-title">#}
{#                    <h2>广告位</h2>#}
{#                    <span class="icon_dot"></span>#}
{#                </div>#}
                <div class="nav-con">
                    {% for ad in ads %}
                        {% if ad.is_active %}
                        <div style="margin-bottom: 5px; margin-left: -14px; border:1px solid rgb(221, 221, 221)">
                            <a href="{{ ad.url }}" target="_blank"><img width="250" src="media/{{ ad.img }}" alt="{{ ad.name }}"></a>
                        </div>
                        {% endif %}
                    {% endfor %}
                    {% if not ads %}
{#                        <p>抱歉，暂时没有广告</p>#}
                    {% endif %}

                    <!--div style="margin-bottom: 5px">
                        <a href="http://localhost:8080" style="color: lightblue;text-decoration:underline">1234</a>
                    </div>
                    <div style="margin-bottom: 5px">
                        <a href="http://localhost:8080" style="color: lightblue;text-decoration:underline">1234</a>
                    </div>
                    <div style="margin-bottom: 5px">
                        <a href="http://localhost:8080" style="color: lightblue;text-decoration:underline">1234</a>
                    </div-->
                    {#                        <dl>#}
                    {#                            <dt class="selected"><span class="common-img flex minus"></span><a href="javascript:;">佳汇释义</a> </dt>#}
                    {#                            <div class="su_leftmenu">#}
                    {#                                <dd class="left_navactive">#}
                    {#                                    <a href="javascript:;">何为佳汇工程</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">三项承诺</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">五项保障</a>#}
                    {#                                </dd>#}
                    {#                            </div>#}
                    {#                        </dl>#}
                    {#                        <dl>#}
                    {#                            <dt class=""><span class="common-img flex minus"></span><a href="javascript:;">佳汇材料</a> </dt>#}
                    {#                            <div class="su_leftmenu">#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">原材料篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">研发篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">生产篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">环保篇</a>#}
                    {#                                </dd>#}
                    {#                            </div>#}
                    {#                        </dl>#}
                    {#                        <dl>#}
                    {#                            <dt class=""><span class="common-img flex minus"></span><a href="javascript:;">佳汇施工</a> </dt>#}
                    {#                            <div class="su_leftmenu">#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">资质篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">安全篇</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">工艺篇</a>#}
                    {#                                </dd>#}
                    {#                            </div>#}
                    {#                        </dl>#}
                    {#                        <dl>#}
                    {#                            <dt class=""><span class="common-img flex minus"></span><a href="javascript:;">佳汇服务</a> </dt>#}
                    {#                            <div class="su_leftmenu">#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">售前</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">售中</a>#}
                    {#                                </dd>#}
                    {#                                <dd >#}
                    {#                                    <a href="javascript:;">售后</a>#}
                    {#                                </dd>#}
                    {#                            </div>#}
                    {#                        </dl>#}
                </div>
            </div>
        </aside>
        <style>
            .left .title {
                display: flex;
                justify-content: space-between;
                align-items: center;
            }

            .uc-btn-md_co {
                {#width: 0px;#}
                line-height: 28px;
        </style>
        <div class="left">
            <div class="title"><h1>
                キーワード：“{{ q }}”
            </h1>
            </div>
            <div class="content clearfix">
                <ul class="arts-list">
                    {% for article in articles %}
                        <li>
                            <a href="{% url 'article_details' article.id %}" target="_blank"
                               title="{{ article.title }}">{{ article.title }}</a>
                        </li>
                    {% endfor %}
                    {% if not articles %}
                        <p>すみません、文章なし...</p>
                    {% endif %}
                </ul>

                {% if articles %}
                    <!-- 分页 -->
                    <div class="page hidden_xs clearfix">
                        <ul class="page_l">
                            {% if articles.has_previous %}

                                <li><a class="start" href="?q={{ q }}&page={{ articles.previous_page_number }}">上一页</a>
                                </li>
                            {% endif %}
                            {% for num in articles.paginator.page_range %}
                                {% if articles.number == num %}
                                    <li><a class="selected">{{ num }}</a></li>
                                {% else %}
                                    <li><a href="?q={{ q }}&page={{ num }}">{{ num }}</a>
                                    </li>
                                {% endif %}
                            {% endfor %}

                            {% if articles.has_next %}
                                <li><a class="prev" href="?q={{ q }}&page={{ articles.next_page_number }}">次へ</a>
                                </li>
                            {% endif %}

                            {#                            <li><a class="end" href="javascript:;">末页</a></li>#}
                            {#                            <li>#}
                            {#                                <select name="sldd" class="pagetext" style="width: 55px;" onchange="location.href=this.options[this.selectedIndex].value;">#}
                            {#                                    <option value="/plus/list.php?tid=14&amp;TotalResult=17&amp;PageNo=1" selected="">1</option>#}
                            {#                                    <option value="http://demo.kangjingept.com:8020/plus/list.php?tid=14&amp;TotalResult=17&amp;PageNo=2">2</option>#}
                            {#                                    <option value="http://demo.kangjingept.com:8020/plus/list.php?tid=14&amp;TotalResult=17&amp;PageNo=3">3</option>#}
                            {#                                </select>#}
                            {#                            </li>#}
                            <li><span
                                    class="pageinfo">第 <strong>{{ articles.number }}</strong> ページ 合計<strong>{{ articles.paginator.num_pages }}</strong> ページ</span>
                            </li>
                        </ul>
                    </div>

                    <!-- 手机版pages-->
                    {#                <div class="phone_page hidden_lg">#}
                    {#                    <a href="javascript:;">上一页</a>#}
                    {#                    <a href="javascript:;" class="active">下一页</a>#}
                    {#                </div>#}

                    </div>
                {% endif %}

        </div>
    </div>

    </div>
    <!--inner end-->
{% endblock %}